<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font_3381341_m6j934whys/iconfont.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/interface.js"></script>
</head>

<body>
    <div class="header">
        <img src="../imges/header.png" alt="">
        <div class="sign-login">
            <p class="zhuce"><a href="javascript:;">注册</a></p>
            <p class="denglu"><a href="javascript:;">登录</a></p>
        </div>
    </div>
    <div class="swiper-container all">
        <div class="swiper-bar">
            <li><img src="../imges/banner2.jpg" alt=""></li>
            <li><img src="../imges/banner1.jpg" alt=""></li>
            <li><img src="../imges/banner2.jpg" alt=""></li>
            <li><img src="../imges/banner1.jpg" alt=""></li>
            <li><img src="../imges/banner2.jpg" alt=""></li>
        </div>
        <ul class="swiper-list">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="leftSlide">&lt;</div>
        <div class="rightSlide">&gt;</div>
    </div>
    <!-- 搜索 -->
    <form class="searchOrderLimit all ">
        <div class="searchBar">
            <input type="text" class="searchCon">
            <a class="searchBtn" href="javascript:;"></a>
        </div>
        <div class="orderTypeBox">
            <label><input type="radio" name="orderType" class="orderType" value="asc" id="sheng" checked>价格升序</label>
            <label><input type="radio" name="orderType" class="orderType" value="desc" id="jiang">价格降序</label>
        </div>
        <input class="resetGrade" type="reset" value="重置">
    </form>

    <!-- 主体 -->
    <div class="centent all">
    </div>

    <div class="pageBox all">
        <a href="javascript:;" class="prev">上一页</a>
        <span class="cur">1/1</span>
        <span class="tips">共16条</span>
        <a href="javascript:;" class="next">下一页</a>
    </div>

    <!-- 尾部 -->
    <div class="footer all">
        <div class="footer-left fl">
            <div class="footer-top">
                <div>
                    <h3>客服中心</h3>
                    <p>客服在线时间:09:00 - 21:00</p>
                    <p>客服QQ: 123456789</p>
                </div>
                <div>
                    <h3>售后服务</h3>
                    <p>退款政策</p>
                    <p>换货政策</p>
                </div>
                <div>
                    <h3>关于</h3>
                    <p>
                        <span>招聘信息</span>
                        <span>网站地图</span>
                        <span>联系我们</span>
                        <span>媒体信息</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="footer-right fr">
            <img src="../imges/sao.jpg" alt="">
            <p>3DM商城APP</p>
        </div>
        <div class="footer-bootom ">
            <p>CopyRight@2003-2018 www.3DMGAME.COM All Right Reserved</p>
            <p>京ICP备14006952号-1京网文(2016)1650-207号沪公网安备31011202006753号</p>
        </div>
    </div>
    <!-- 注册 -->
    <div class="registered">
        <h1>3DM欢迎新人加入</h1>
        <p>
            <label for="">区号:</label>
            <select name="" id="theDrop-down">
                <option value="" selected>中国大陆（CHINA）-86</option>
                <option value="">中国香港</option>
                <option value="">中国澳门</option>
                <option value="">中国台湾</option>
                <option value="" disabled>美国（暂时无法选）</option>
                <option value="" disabled>日本（暂时无法选）</option>
            </select>
        </p>
        <p>
            <label for="">账号:</label>
            <input type="text" class="user" value="请输入手机号">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密码:</label>
            <input type="text" class="pwd" value="请输入密码（6-18位字母、数字、符号）">
            <span class="pwd_span"></span>
            <i class="hah">×</i>
        </p>
        <p>
            <label for="">确认密码:</label>
            <input type="text" class="confirmPwd" value="再次输入密码">
            <span class="confirmPwd_span"></span>
        </p>
        <p><a href="javascript:;" class="zhucetwo">注册</a></p>
        <div>
            <input type="checkbox" checked>我已同意<a href="javascript:;">《3DM账号协议》</a>
            <span>已有账号?</span><a href="">去登录</a>
        </div>
    </div>
    <!-- 登录 -->
    <div class="theLogin">
        <h1>会员登录</h1>
        <p>
            <label for=""></label>
            <input type="text" class="usertwo" value="请输入手机号/论坛账号">
            <span class="user_span"></span>
        </p>
        <p>
            <label for=""></label>
            <input type="text" class="pwdtwo" value="请输入密码">
            <span class="pwd_span"></span>
        </p>
        <div class="one">
            <input type="checkbox" checked>
            <span>自动登录</span>
            <i></i>
            <span>忘记密码</span>
            <a href="">新会员注册</a>
        </div>
        <p><a href="javascript:;" class="denglutwo" style="font-size: 18px;">登录</a><i class="hah">×</i></p>
        <s class="fl"></s>
        <span>社交账号登录</span>
        <s class="fr"></s>
        <p class="wuwu"><i class="iconfont icon-weixin
            "></i><i class="iconfont icon-zhifubaozhifu"></i><i
                class="iconfont icon-zhengzhouyinhangAPPtubiaodiergaolunkuohuachunse-34"></i></p>
    </div>
</body>
<script src="../js/index.js"></script>
<script>

    $(document).on("click", ".zhuce", function () {
        $(".registered").css("display", "block")
    })
    $(document).on("click", ".denglu", function () {
        $(".theLogin").css("display", "block")
    })
    $(document).on("click", ".user", function () {
        $(this).val("");
    })
    $(document).on("click", ".pwd", function () {
        $(this).val("");
    })
    $(document).on("click", ".usertwo", function () {
        $(this).val("");
    })
    $(document).on("click", ".pwdtwo", function () {
        $(this).val("");
    })
    $(document).on("click", ".confirmPwd", function () {
        $(this).val("");
    })

    var isUserOk = false;
    var isPwdOk = false;
    var isconfirmPwdOk = false;
    $(".user").blur(function () {
        isUserOk = false;
        var user = $(this).val().trim();
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(user)) {
            $.ajax({
                type: "get",
                url: "../php/isExistPhone.php",
                data: { user: $(".user").val().trim() },
                dataType: "json",
                success: function (result) {
                    var { status, message } = result;
                    if (status) {
                        isUserOk = true;
                    } else {
                        alert("已经注册过词手机号")
                    }
                }
            })
        }
        else {
            $(this).val("输入正确的手机号");
        }
    })
    $(".pwd").blur(function () {
        isPwdOk = false;
        var pwd = $(this).val().trim();
        var reg = /^[\w$]{6,12}$/;
        if (reg.test(pwd)) {
            isPwdOk = true;
        } else {
            $(this).val("密码仅支持字母、数字、下划线和$,6-12位");
        }
    })
    $(".confirmPwd").blur(function () {
        if ($(".pwd").val() == $(".confirmPwd").val()) {
            isconfirmPwdOk = true;
        } else {
            $(this).val("请输入相同的密码");
        }
    })
    $(".zhucetwo").click(function () {
        if (isUserOk && isPwdOk && isconfirmPwdOk) {
            $.ajax({
                type: "post",
                url: "../php/register.php",
                data: { user: $(".user").val().trim(), pwd: $(".pwd").val().trim() },
                dataType: "json",
                success: function () {
                    $(".registered").css("display", "none")
                    alert("注册成功")
                }
            })
        }
    })

    $(".denglutwo").click(function () {
        if ($(".usertwo").val() && $(".pwdtwo").val()) {
            $.ajax({
                type: "post",
                url: "../php/login.php",
                data: { user: $(".usertwo").val().trim(), pwd: $(".pwdtwo").val().trim() },
                dataType: "json",
                success: function (result) {
                    var { status, message } = result;
                    console.log(result);
                    if (status) {
                        $(".zhuce").remove();
                        $(".denglu").remove();
                        $(".theLogin").css("display", "none")
                        $(".sign-login").attr("class", ".hide");
                        setCookie("lgc", $(".usertwo").val().trim());
                        var html = '';
                        html += `<img src="../imges/header.png" alt="">     <div class="sign-user">
                        <a class="huanyin" href="javascript:;">欢迎${$(".usertwo").val().trim()}</a>
                        <a class="tuichu" href="javascript:;">退出</a>
                    </div>`
                        $(".header").html(html)
                    } else {
                        alert(message);
                    }
                }
            })
        }
    })
    $(".hah").click(function () {
        $(".registered").css("display", "none")
        $(".theLogin").css("display", "none")
    })

</script>




</html>